import React, { useState, useEffect } from 'react'
import './index.less'
import NavBar from '../../components/Navbar'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { deleteBank, getBankList, selectBank } from '../../api/union'
import { Modal, Toast } from 'antd-mobile'
import AmeModal from '../../components/AmeModal'

function BankManagement() {
  const navigate = useNavigate()
  const params = useSearchParams()[0] // 1:银行卡  2：支付宝 | user_type 1: 个人（只能一张卡）
  const [isManage, setIsManage] = useState(false)
  const [selectId, setSelectId] = useState('')
  const [deleteId, setDeleteId] = useState('')

  const [bankData, setBankData] = useState([])
  const [deleteVisible, setDeleteVisible] = useState(false)

  const [hideAdd, setHideAdd] = useState(true)

  const getList = () => {
    getBankList({
      type: params?.get('type') || 1
    }).then((res) => {
      console.log(res)
      setBankData(res?.data || [])
      if (params?.get('user_type') && res?.data?.length >= 1) {
        // 个人（只能一张卡）
        setHideAdd(true)
      } else {
        setHideAdd(false)
      }

      if (res?.data) {
        setSelectId(res?.data.find((i) => i.is_use)?.id)
      }
    })
  }

  useEffect(() => {
    getList()
  }, [])

  const handleSelectBank = (item) => {
    //
    if (isManage) {
      setDeleteId(item.id)
    } else {
      if (selectId !== item.id) {
        selectBank({
          bank_id: item.id,
          type: params?.get('type') || 1
        })
          .then((res) => {
            setSelectId(item.id)
          })
          .catch((err) => {
            Toast.show({
              content: err.message,
              position: 'bottom'
            })
          })
      }
    }
  }

  const handleDeleteBank = () => {
    if (isManage) {
      Toast.show({
        content: '删除中',
        icon: 'loading',
        maskClickable: false
      })
      deleteBank({
        bank_id: deleteId
      })
        .then((res) => {
          console.log(res)
          Toast.clear()
          setDeleteVisible(false)
          getList()
        })
        .catch((err) => {
          Toast.show({
            content: err.message
          })
        })
    }
  }

  return (
    <div>
      <NavBar
        title={`管理${+params?.get('type') === 2 ? '支付宝' : '银行卡'}`}
        other={<span onClick={() => setIsManage(!isManage)}>{!isManage ? '管理' : '取消'}</span>}
      />
      <div className="bank_list">
        {bankData.map((item) => (
          <div
            className={`bank_item ${(isManage ? deleteId : selectId) === item.id ? 'selected' : ''}`}
            onClick={() => handleSelectBank(item)}
          >
            {!isManage ? <div className="select"></div> : null}
            <div className="info">
              <div className="name">{+params?.get('type') === 2 ? item?.ali_account : `${item?.bank_name}(${item?.bank_no})`}</div>
              <div className="time">48小时内到账</div>
            </div>
            {isManage ? <div className="select"></div> : null}
          </div>
        ))}
      </div>

      {isManage ? (
        <div className={`delete_bank ${deleteId ? 'active' : ''}`} onClick={() => setDeleteVisible(true)}>
          解绑
        </div>
      ) : (
        <div
          className={`add_bank ${hideAdd ? 'none' : ''}`}
          onClick={() => navigate(+params?.get('type') === 2 ? '/add_ali' : '/add_bank')}
        >
          添加
        </div>
      )}

      <AmeModal
        title="是否取消绑定该银行卡"
        confirmText="同意"
        visible={deleteVisible}
        onConfirm={handleDeleteBank}
        onCancel={() => setDeleteVisible(false)}
      />
    </div>
  )
}

export default BankManagement
